<template>
  <div :key="keyForReport">
    <div style="background-image: linear-gradient(#648cae 0, #fff 70%); height: 340px; width: 100%">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          margin-bottom: 16px;
          width: 74px;
          height: 28px;
          background-color: rgba(245, 245, 245, 0.5);
          float: right;
          margin-top: 20px;
          margin-right: 16px;
          border-radius: 8px;
        "
        @click="handleClosePage">
        <van-icon name="arrow-left"></van-icon>
        <span style="margin-left: 10px; color: #666666">返回</span>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 16px;
          color: #5f75bc;
          font-weight: 600;
          font-size: 14px;
        ">
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 123px;
            height: 36px;
            background: #f0f8ff;
            border-radius: 8px;
          ">
          顾客名：{{ consumerName }}
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 150px;
            height: 36px;
            background: #f0f8ff;
            border-radius: 8px;
          ">
          {{ consumerCode }}
        </div>
        <div
          style="
            display: flex;
            align-items: center;
            justify-content: center;
            width: 60px;
            height: 36px;
            background: #f0f8ff;
            border-radius: 8px;
          ">
          {{ isReport ? '终极报告' : '初版报告' }}
        </div>
      </div>
      <div style="display: flex; width: 100%; justify-content: center; margin-top: 16px">
        <img src="@/assets/images/report-s.png" width="358" height="135" />
      </div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #6891b3;
        padding: 37px 16px 0 16px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: -100px;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #ffffff;
          border-radius: 8px;
          color: #5f75bc;
          font-size: 16px;
          font-weight: 600;
        ">
        破冰-信任
      </div>
      <div style="width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 0px">
        <div style="padding: 16px 0; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[0]"></div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #ffffff;
          border-radius: 8px;
          color: #5f75bc;
          font-size: 16px;
          font-weight: 600;
        ">
        信任-成交
      </div>
      <div style="width: 100%; display: flex; justify-content: center; align-items: center; margin-top: 0px">
        <div style="padding: 16px 0; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[1]"></div>
      </div>
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #254763;
          border-radius: 8px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        客情方案
      </div>
    </div>
    <div
      style="
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 0px;
        background-color: #e5edf5;
      ">
      <div
        style="padding: 10px 16px 5px 16px; margin: 0; flex: 1; color: #000; font-size: 14px"
        v-html="lstReport[2]"></div>
    </div>
    <div style="width: 100%; height: 20px; background-color: #6891b3"></div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道-性格
      </div>
    </div>
    <div style="widows: 100%; display: flex; justify-content: space-between">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #577d9e;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #214163;
            width: 94px;
            height: 27px;
            background: #aabdcc;
            border-radius: 0px 0px 8px 8px;
          ">
          性格-正
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[3]"></div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #aabdcc;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e5edf5;
            width: 94px;
            height: 27px;
            background: #507696;
            border-radius: 0px 0px 8px 8px;
          ">
          性格-反
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[12]"></div>
      </div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道-财富
      </div>
    </div>
    <div style="widows: 100%; display: flex; justify-content: space-between">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #577d9e;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #214163;
            width: 94px;
            height: 27px;
            background: #aabdcc;
            border-radius: 0px 0px 8px 8px;
          ">
          财富-正
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[4]"></div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #aabdcc;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e5edf5;
            width: 94px;
            height: 27px;
            background: #507696;
            border-radius: 0px 0px 8px 8px;
          ">
          财富-反
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[13]"></div>
      </div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道-情感
      </div>
    </div>
    <div style="widows: 100%; display: flex; justify-content: space-between">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #577d9e;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #214163;
            width: 94px;
            height: 27px;
            background: #aabdcc;
            border-radius: 0px 0px 8px 8px;
          ">
          情感-正
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[5]"></div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #aabdcc;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e5edf5;
            width: 94px;
            height: 27px;
            background: #507696;
            border-radius: 0px 0px 8px 8px;
          ">
          情感-反
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[14]"></div>
      </div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道-健康
      </div>
    </div>
    <div style="widows: 100%; display: flex; justify-content: space-between">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #577d9e;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #214163;
            width: 94px;
            height: 27px;
            background: #aabdcc;
            border-radius: 0px 0px 8px 8px;
          ">
          健康-正
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[6]"></div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #aabdcc;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e5edf5;
            width: 94px;
            height: 27px;
            background: #507696;
            border-radius: 0px 0px 8px 8px;
          ">
          健康-反
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[15]"></div>
      </div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道-运
      </div>
    </div>
    <div style="widows: 100%; display: flex; justify-content: space-between">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #577d9e;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #214163;
            width: 94px;
            height: 27px;
            background: #aabdcc;
            border-radius: 0px 0px 8px 8px;
          ">
          运-正
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[7]"></div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #aabdcc;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e5edf5;
            width: 94px;
            height: 27px;
            background: #507696;
            border-radius: 0px 0px 8px 8px;
          ">
          运-反
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[16]"></div>
      </div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 120px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道-子女
      </div>
    </div>
    <div style="widows: 100%; display: flex; justify-content: space-between">
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #577d9e;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #214163;
            width: 94px;
            height: 27px;
            background: #aabdcc;
            border-radius: 0px 0px 8px 8px;
          ">
          子女-正
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[8]"></div>
      </div>
      <div
        style="
          width: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
          flex-direction: column;
          background-color: #aabdcc;
        ">
        <div
          style="
            display: flex;
            justify-content: center;
            align-items: center;
            color: #e5edf5;
            width: 94px;
            height: 27px;
            background: #507696;
            border-radius: 0px 0px 8px 8px;
          ">
          子女-反
        </div>
        <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[17]"></div>
      </div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        性格（补充）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[18]"></div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        性格（行动）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[19]"></div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        性格（逻辑）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[20]"></div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        性格（感性）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[21]"></div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        性格（策略）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[22]"></div>
    </div>
    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        性格（能量）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[23]"></div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #cbc2a0;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道方案（扬长）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #6891b3">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #fff; font-size: 14px" v-html="lstReport[9]"></div>
    </div>

    <div
      style="
        width: 100%;
        background-color: #ebebeb;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 24px 0 12px 0;
      ">
      <div
        style="
          display: flex;
          justify-content: center;
          align-items: center;
          width: 152px;
          height: 29px;
          background: #214163;
          border-radius: 12px;
          color: #fff;
          font-size: 16px;
          font-weight: 600;
        ">
        人道方案（避短）
      </div>
    </div>
    <div style="width: 100%; display: flex; justify-content: center; align-items: center; background-color: #cbc2a0">
      <div style="padding: 24px 16px; margin: 0; flex: 1; color: #000; font-size: 14px" v-html="lstReport[10]"></div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { getReport } from '@/api/txs';
// 引入第三方组件
import { Notify } from 'vant';

export default {
  name: 'Report',
  components: {
    [Notify.name]: Notify,
  },
  data() {
    return {
      keyForReport: 0,
      consumerName: '',
      consumerCode: '',
      isReport: false,
      lstReport: [],
    };
  },
  methods: {
    handleClosePage: async function () {
      this.$emit('closed');
    },
    loadReport(item) {
      this.isReport = item.status === 1;
      this.consumerCode = item.ccode;
      this.consumerName = item.cname;
      const errAlertMsg = '获取报告失败，请稍后再试';
      this.lstReport.splice(0, this.lstReport.length);
      getReport(item.id)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              Notify({ type: 'danger', message: res.data.message });
            } else {
              Notify({ type: 'danger', message: errAlertMsg });
            }
            return;
          }
          const ret = res.data.data;
          if (ret && ret.length > 0) {
            this.lstReport.push(...ret);
            this.keyForReport += 1;
          }
        })
        .catch(err => {
          console.error(err);
          Notify({ type: 'danger', message: errAlertMsg });
        });
    },
  },
};
</script>
